{#
  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros-protocol.html" import split with context %}

{% extends "products/vpn/base.html" %}

{% block page_title_full %}{{ftl('vpn-pricing-page-title')}}{% endblock %}
{% block page_title_suffix %}{% endblock %}
{% block page_desc %}{% endblock %}

{% block body_class %}mozilla-vpn-pricing-page{% endblock %}

{% block canonical_urls %}<meta name="robots" content="noindex,follow">{% endblock %}

{% set _utm_source = 'www.mozilla.org-vpn-product-page' %}
{% set _utm_campaign = 'vpn-pricing-page' %}
{% set _params = '?utm_source=' ~ _utm_source ~ '&utm_medium=referral&utm_campaign=' ~ _utm_campaign %}

{% block page_css %}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('mozilla-vpn-common-refresh') }}
  {{ css_bundle('mozilla-vpn-pricing-refresh') }}
{% endblock %}

{% block site_header %}
  {% with
    hide_nav_download_button=True,
    hide_nav_get_vpn_button=True
  %}
    {% include 'includes/protocol/navigation/navigation.html' %}
  {% endwith %}
{% endblock %}

{% block content %}
<main>
  {% if vpn_available %}
    {% if mobile_sub_only %}
      <header class="c-pricing-main-header mzp-l-content mzp-t-content-xl">
        <h1 class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-vpn">{{ ftl('vpn-pricing-mozilla-vpn') }}</h1>
        <h2 class="c-section-title">{{ ftl('vpn-pricing-one-subscription') }}</h2>
      </header>
      {% with campaign = 'vpn-pricing-page' %}
        {% include 'products/vpn/includes/mobile-subscribe.html' %}
      {% endwith %}
    {% else %}
      <header class="c-pricing-main-header mzp-l-content mzp-t-content-xl">
        <h1 class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-vpn">{{ ftl('vpn-pricing-mozilla-vpn') }}</h1>
        <h2 class="c-section-title">{{ ftl('vpn-pricing-one-subscription') }}</h2>
      </header>
      <div class="mzp-l-content mzp-t-content-xl">
        {% include 'products/vpn/includes/pricing-refresh.html' %}
      </div>
    {% endif %}
  {% else %}
    <header class="c-pricing-main-header mzp-l-content mzp-t-content-xl">
      <h1 class="c-section-title">{{ ftl('vpn-pricing-vpn-not-available') }}</h1>
    </header>
    <div class="mzp-l-content mzp-t-content-xl mzp-u-centered">
      <a class="mzp-c-button mzp-t-product mzp-t-xl" href="{{ url('products.vpn.invite') }}" data-cta-text="Join the VPN Waitlist" data-testid="join-waitlist-button">
        {{ ftl('vpn-shared-waitlist-link') }}
      </a>
    </div>
  {% endif %}

  {% include 'products/vpn/includes/press.html' %}

  <section class="c-faq t-content-body mzp-l-content mzp-t-content-lg">
    <h2 class="c-section-title">{{ ftl('vpn-pricing-faqs') }}</h2>

    <details id="faq-refunds" class="c-faq-item mzp-is-anchor-link">
      <summary class="c-faq-item-heading">
        <h3>{{ ftl('vpn-pricing-refund-policy') }}</h3>
      </summary>
        <p class="c-faq-item-detail">{{ ftl('vpn-pricing-the-first-time-you') }}</p>
        <p class="c-faq-item-detail">{{ ftl('vpn-pricing-if-you-purchased') }}</p>
    </details>

    <details id="faq-information" class="c-faq-item mzp-is-anchor-link">
      {% set privacy_principles = 'href="%s" data-cta-text="Privacy principles" '|safe|format(url('privacy.principles')) %}
      {% set privacy_notice = 'href="%s" data-cta-text="Privacy notice" '|safe|format(url('privacy.notices.subscription-services')) %}

      <summary class="c-faq-item-heading">
        <h3>{{ ftl('vpn-pricing-what-information') }}</h3>
      </summary>
      <p class="c-faq-item-detail">{{ ftl('vpn-pricing-we-adhere-strictly', principles=privacy_principles, notice=privacy_notice) }}</p>
    </details>

    <details id="faq-subscriptions" class="c-faq-item mzp-is-anchor-link">

      {% set manage_url = 'href="%s" data-cta-text="Manage VPN" '|safe|format(('https://vpn.mozilla.org/r/vpn/subscription' + _params)) %}

      <summary class="c-faq-item-heading">
        <h3>{{ ftl('vpn-pricing-how-do-i-manage') }}</h3>
      </summary>
      <p class="c-faq-item-detail">{{ ftl('vpn-pricing-if-already-subscribed', manage=manage_url) }}</p>
    </details>

  </section>

  <footer class="c-footer-legal mzp-l-content mzp-t-content-xl">
    {% include 'products/vpn/includes/footer-legal.html' %}
  </footer>
</main>

{% endblock %}

{% block js %}
  {{ js_bundle('fxa_product_button') }}
  {{ js_bundle('data_begincheckout') }}
{% endblock %}
